<template>
  <div class="cpfltk_box">
    <div class="cpfltk" :style="$parent.cpfltkflg==true?'width:100%!important;':''">
      <div class="head_clos">
        <h2 v-if="$store.state.xiugaiflag==''">添加分类</h2>
        <h2 v-if="$store.state.xiugaiflag!=''">修改分类</h2>
        <span>
          <a-icon class="close" @click="close" type="close" />
        </span>
      </div>
      <div class="cpfltk_inp">
        <ul>
          <li>
            <span class="inp_tit">
              <span class="bxred">*</span> 分类名称：
            </span>
            <!-- <a-input
              style="width:500px;"
              type="text"
              placeholder="请输入分类名称"
            />-->
            <a-auto-complete
              class="li"
              :dataSource="$store.state.flnamedata"
              style="width: 500px"
              placeholder="请输入分类名称"
              :filterOption="flfilterOption"
              @change="cpflchange"
              v-model="cpfl"
              :defaultValue="cpfl"
            />
          </li>
          <li>
            <span class="inp_tit">图片上传：</span>
            <div class="clearfix">
              <a-upload
                action="http://mobile.bearing.cn/set/upload.php"
                listType="picture-card"
                :fileList="fileList"
                @preview="handlePreview"
                :remove="removelist"
                @change="handleChange"
                accept=".jpg, .png"
              >
                <div v-if="fileList.length < 4">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
            </div>
          </li>
          <li>
            <span class="inp_tit">介绍：</span>
            <!-- <a-textarea
              v-model="jstext"
              style="width:500px; vertical-align: top;"
              name
              id
              cols="30"
              rows="4"
            ></a-textarea>-->
            <Editor ref="froalaEditor" @open="init" @on-change="changeContent"></Editor>
          </li>

          <li class="foot_btn">
            <a-button type="primary" @click="subscfl">保存</a-button>
            <a-button @click="close">取消</a-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import Editor from "../froalaed/froalaed.vue";

export default {
  inject: ["reload"],
  data() {
    return {
      //图标----开始
      previewVisible: false,
      previewImage: "",
      //图标----结束

      previewVisible: false,
      previewImage: "",
      fileList: [],
      fldatalist: [],
      cpfl: this.$store.state.xiugaiflag != "" ? this.$parent.proName : "",
      cppic: [],
      jstext: this.$store.state.xiugaiflag != "" ? this.$parent.proRemark : "",
      uid: "",
      xhval: "",
      content: this.$store.state.xiugaiflag != "" ? this.$parent.proRemark : ""
    };
  },
  components: {
    Editor
  },
  methods: {
    // fffffffffffffffffffffffffffffffff
    init() {
      console.log("!1111111111");
      this.$nextTick(() => {
        console.log(this.content);
        this.$refs.froalaEditor.setHtml(this.content);
      });
    },
    changeContent(html) {
      this.content = html;
      console.log(html)
    },
    // fffffffffffffffffffffffffffffffff
    //分类名称
    cpflchange(value) {
      console.log(value)
    },
    //------结束 上传产品图
    //图标----开始
    handleCancel() {
      this.previewVisible = false;
    },
    //图标----结束
    handleCancel() {
      this.previewVisible = false;
    },
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },

    ///写到这---------------------------
    removelist(file) {
      this.uid = file.uid;
      if (this.uid == 0 || this.uid == 1 || this.uid == 2) {
        this.$parent.xgvalue.splice(this.uid, 1);
      } else {
      }
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
    },
    //客户名称
    flfilterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toUpperCase()
          .indexOf(input.toUpperCase()) >= 0
      );
    },
    subscfl() {
      if (this.$store.state.xiugaiflag != "") {
        //修改分类===================
        if (this.cpfl != "") {
          if (this.fileList.length) {
            for (var i = 0; i < this.fileList.length; i++) {
              // if (this.fileList[i].url != undefined) {
              if (this.fileList[i].url) {
                this.cppic.push(this.$parent.xgvalue[i]);
              } else {
                this.cppic.push(this.fileList[i].thumbUrl);
              }
            }
          }

          this.axios
            .post(
              "kucun/AddProClass.php",
              qs.stringify({
                id: this.$parent.listid,
                sqdwid: this.$store.state.bbl_sqdwid,
                proName: this.cpfl,
                proPic: this.cppic,
                proRemark: this.content,
                proClass: 1,
                language: 0
              })
            )
            .then(res => {
              if (res.data.code == 303) {
                this.cppic = [];
                this.reload();
                this.$store.state.tjwz = false;
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg,
                  duration: 1.5
                });
                this.$store.state.flnamedata = [];
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg,
                  duration: 1.5
                });
                this.cppic = [];
              }
            });
        } else {
          this.cppic = [];
          this.$store.state.flnamedata = [];

          this.$notification["error"]({
            message: "失败",
            description: "分类名称不能为空！",
            duration: 1.5
          });
        }
      } else {
        //添加================
        if (this.cpfl != "") {
          if (this.fileList.length) {
            for (var i = 0; i < this.fileList.length; i++) {
              this.cppic.push(this.fileList[i].thumbUrl);
            }
          }
          this.axios
            .post(
              "kucun/AddProClass.php",
              qs.stringify({
                sqdwid: this.$store.state.bbl_sqdwid,
                proName: this.cpfl,
                proPic: this.cppic,
                proRemark: this.content,
                proClass: 1,
                language: 0
              })
            )
            .then(res => {
              if (res.data.code == 303) {
                this.cppic = [];
                this.reload();
                this.$store.state.tjwz = false;
                this.$notification["success"]({
                  message: "成功",
                  description: res.data.msg,
                  duration: 1.5
                });
                this.$store.state.flnamedata = [];
              } else {
                this.$notification["error"]({
                  message: "失败",
                  description: res.data.msg,
                  duration: 1.5
                });
                this.cppic = [];
              }
            });
        } else {
          this.cppic = [];
          this.$notification["error"]({
            message: "失败",
            description: "分类名称不能为空！",
            duration: 1.5
          });
        }
      }
    },

    close() {
      this.$parent.cpfltkflg = false;
      this.$store.state.xiugaiflag = "";
      this.$store.state.flnamedata = [];
    }
  },

  created() {
    setTimeout(() => {
      if (
        this.$parent.xgvalue != "" &&
        this.$parent.xgvalue != " " &&
        this.$parent.xgvalue != null
      ) {
        for (var i = 0; i < this.$parent.xgvalue.length; i++) {
          let ss = {
            uid: i,
            name: " ",
            status: "done",
            url:
              "https://image.bearing.cn/qy/member/imgcp/" +
              this.$store.state.bbl_sqdwid +
              "/" +
              this.$parent.xgvalue[i]
          };
          this.fileList.push(ss);
        }
      }
      if (this.$store.state.xiugaiflag == "") {
        this.fileList = [];
      }
    }, 1000),
      this.$store.commit("getdatalist");
  }
};
</script>

<style lang='less' >
.cpfltk_box {
  .cpfltk {
    width: 66%;
    height: auto;
    box-shadow: 0px 0px 7px #ccc;
    background-color: #fff;
    margin: 9px auto;
    position: relative;
    top: 63px;
    text-align: left;
    padding: 20px;
    .head_clos {
      display: flex;
      justify-content: space-between;
      .close {
        font-size: 20px;
      }
    }
    .cpfltk_inp {
      ul {
        li {
          margin: 20px 0;
          .inp_tit {
            display: inline-block;
            width: 100px;
            text-align: right;
          }
          .fr-box {
            width: 80%;
            display: inline-block;
            vertical-align: top;
          }
          //上传图片
          .clearfix {
            width: 80%;
            display: inline-block;
            vertical-align: middle;
            .ant-upload.ant-upload-select-picture-card {
              border: 1px dashed #d9d9d9 !important;
              width: 104px !important;
              height: 104px !important;
            }
          }
          ant-upload.ant-upload-select-picture-card :hover {
            border-color: #40a9ff !important;
          }

          /* you can make up upload button and sample style by using stylesheets */
          .ant-upload-select-picture-card i {
            font-size: 32px;
            color: #999;
          }

          .ant-upload-select-picture-card .ant-upload-text {
            margin-top: 8px;
            color: #666;
          }
          .li {
            ul {
              li {
                margin: 0 !important;
              }
            }
          }
        }
        .foot_btn {
          width: 100%;
          text-align: center;
          button {
            margin: 0 20px;
          }
        }
      }
    }
    @media (max-width: 1600px) {
      .cpfltk_inp {
        overflow-y: scroll;
        height: 480px;
      }
    }
  }
}
</style>
